import React, { useState, useEffect } from 'react';
import {
    Button,
    Space,
    Dropdown,
    message,
    DatePicker,
    Card, Modal,
    Rate,
    Input,
    Alert,
} from 'antd';
import { DownOutlined, CaretRightFilled } from '@ant-design/icons';
import './screenrecord.scss'
import { getCourseData, getViewFeedback, getStudentEstimate } from '../../api/mycourse';
import { SpaceCompactItemContext } from 'antd/es/space/Compact';
// 卡片组件
const { Meta } = Card;
// 评分组件 
const desc = ['terrible', 'bad', 'normal', 'good', 'wonderful'];
// 学生反馈意见框
const { TextArea } = Input;

const App = () => {
    const [messageApi, contextHolder] = message.useMessage();
    // 存放学生课程数据的信息
    const [courseData, setCourseData] = useState([])
    useEffect(() => {
        getCourseData({
            // 此时是假的参数
            username: 'admin'
        }).then(res => {
            // console.log(res.data.data);
            setCourseData(res.data.data)
        })
    }, [])

    // 存放评价学生或反馈的那个学生的信息
    const [studentInfo, setStudentInfo] = useState([])
    // 评价学生 组件是否展示的布尔值
    const [isModalOpen1, setIsModalOpen1] = useState(false);
    // 存放评价数据
    const [estimate, setEstimate] = useState({
        learningTarget: '',
        classSituation: '',
        afterAdvice: '',
    })
    // 控制评价学生组件的确认按钮，让对话框隐藏
    const subEstimate = () => {
        getStudentEstimate(estimate).then(res => {
            messageApi.open({
                content: res.data.message,
                type: "success",
            });
            setEstimate({
                learningTarget: '',
                classSituation: '',
                afterAdvice: '',
            })
        })
        setIsModalOpen1(false);
    };
    // 查看反馈 组件是否展示的布尔值
    const [isModalOpen2, setIsModalOpen2] = useState(false);
    // 存放反馈数据
    const [feedbackdata, setFeedbackedata] = useState('')
    // 控制查看反馈组件的确认按钮，让对话框隐藏
    const subFeedback = () => {
        getViewFeedback({feedbackdata}).then(res => {
            messageApi.open({
                content: res.data.message,
                type: "success",
            });
            setFeedbackedata('')
        })
        setIsModalOpen2(false);
    };


    // 科目组件
    const [size, setSize] = useState('large'); // default is 'middle'
    const items = [
        {
            label: '语文',
            key: '1',
            icon: <CaretRightFilled />,
        },
    ];
    const handleMenuClick = (e) => {
        message.info('语文课程.');
        console.log('click', e);
    };
    const menuProps = {
        items,
        onClick: handleMenuClick,
    };
    // 日期组件
    const onChange = (date, dateString) => {
        console.log(date, dateString);

    };
    // 评分组件
    const [value, setValue] = useState(3);

    return (
        <div className='screenrecord'>
            {/* message 提示信息, 必须书写的一个内容 */}
            {contextHolder}
            {/* <Radio.Group value={size} onChange={(e) => setSize(e.target.value)}></Radio.Group> */}
            <Space direction="vertical">
                <Space wrap>
                    <Button type="primary" size={size}>
                        全部课程
                    </Button>
                    <Button type="primary" size={size}>
                        测评课
                    </Button>
                    <Button type="primary" size={size}>
                        正式课
                    </Button>
                    {/*科目组件  */}
                    <span
                        style={{
                            marginLeft: '415px'
                        }}
                    >科目：</span>
                    <Dropdown menu={menuProps}>
                        <Button>
                            <Space>
                                语文
                                <DownOutlined />
                            </Space>
                        </Button>
                    </Dropdown>
                    {/* 日期组件 */}
                    <span
                        style={{
                            marginLeft: '50px'
                        }}
                    >时间：</span>
                    <DatePicker
                        onChange={onChange}
                        placeholder='--年--月--日'
                    />
                </Space>
            </Space>
            {/* 分割线 */}
            <hr
                style={{
                    margin: '15px'

                }}
            />

            {/* 渲染课程卡片 */}
            <div className='cards'>
                {courseData && courseData.map(item => {
                    return (
                        // 评价学生的反馈
                        <Card
                            key={item.courseid}
                            hoverable
                            style={{
                                width: 240,
                            }}
                            cover={<video src={item.video} controls loop muted poster="poster" />}
                        >
                            <div
                                style={{
                                    display: "flex",
                                    justifyContent: 'space-around',

                                }}
                            >
                                <span>{item.studentname}</span>
                                <span>{item.grade + item.subject}</span>
                            </div>
                            {/* 存放两个按钮的 */}
                            <div style={{ display: "flex", justifyContent: 'space-around', }}>
                                {/* 查看评价 */}
                                <Button
                                    type="primary"
                                    onClick={() => {
                                        setStudentInfo(item)
                                        setIsModalOpen1(true)
                                    }}
                                >
                                    进行评价
                                </Button>
                                {/* 学生反馈弹框*/}
                                <Button
                                    type="primary"
                                    onClick={() => {
                                        setStudentInfo(item)
                                        setIsModalOpen2(true)
                                    }}
                                >
                                    查看反馈
                                </Button>
                            </div>
                        </Card>
                    )
                })}
            </div>

            {/* 查看评价对话框 */}
            <Modal
                footer={null}
                title="评价学生"
                open={isModalOpen1}
                onCancel={() => { setIsModalOpen1(false) }}
            >
                <Alert message={studentInfo.studentname + ' ' + studentInfo.grade + studentInfo.subject} type="success" />
                {/* 评分组件 */}
                <span>
                    <Rate tooltips={desc} onChange={setValue} value={value} />
                    {value ? <span className="ant-rate-text">{desc[value - 1]}</span> : ''}
                </span>
                {/* 输入框 */}
                学习目标：<Input
                    placeholder="请输入学习目标"
                    showCount='ture'
                    value={estimate.learningTarget}
                    onChange={(e) => {
                        console.log(e.target.value);
                        setEstimate({
                            ...estimate,
                            learningTarget: e.target.value
                        })
                    }}
                />
                上课情况：<Input
                    placeholder="请输入上课情况"
                    showCount='ture'
                    value={estimate.classSituation}
                    onChange={(e) => {
                        console.log(e.target.value);
                        setEstimate({
                            ...estimate,
                            classSituation: e.target.value
                        })
                    }}
                />
                课后建议：<Input
                    placeholder="请输入课后建议"
                    showCount='ture'
                    value={estimate.afterAdvice}
                    onChange={(e) => {
                        console.log(e.target.value);
                        setEstimate({
                            ...estimate,
                            afterAdvice: e.target.value
                        })
                    }}
                />
                <Button
                    type='primary'
                    style={{
                        marginTop: '20px'
                    }}
                    onClick={subEstimate}
                >提交评价</Button>
            </Modal>
            {/* 学生反馈弹框*/}
            <Modal
                title="查看反馈"
                open={isModalOpen2}
                onCancel={() => { setIsModalOpen2(false) }}
                footer={null}
            >
                <Alert message={studentInfo.studentname + ' ' + studentInfo.grade + studentInfo.subject} type="success" />
                {/* 评分组件 */}
                <span>
                    <Rate tooltips={desc} onChange={setValue} value={value} />
                    {value ? <span className="ant-rate-text">{desc[value - 1]}</span> : ''}
                </span>
                {/* 反馈按钮选择 */}
                <div
                    style={{
                        width: '100%',
                        display: 'flex',
                        justifyContent: 'space-around',
                        margin: '30px 0',
                        flexWrap: 'wrap'
                    }}
                >
                    <Button
                        danger size={size}>
                        不够专业
                    </Button>
                    <Button danger size={size}>
                        不够专业
                    </Button>
                    <Button danger size={size}>
                        不够专业
                    </Button>
                    <Button danger size={size}>
                        不够专业
                    </Button>
                    {/* 输入意见反馈框 */}
                    <TextArea
                        placeholder='请输入内容，不少于100字'
                        rows={5}
                        value={feedbackdata}
                        onChange={(e) => {
                            setFeedbackedata(e.target.value)
                        }}
                    />
                    <Button  type='primary'
                        onClick={subFeedback}
                    >提交反馈</Button>
                </div>
            </Modal>
        </div>
    );
};
export default App;